<template>
  <BasicModal v-bind="$attrs" @register="registerModel" @ok="handleSubmit" title="选择列属性">
    <div class="pt-3px pr-3px">
      <BasicTable
        :max-height="300"
        class="page-search-table"
        @register="registerTable"
        :rowSelection="{ type: 'checkbox' }"
        @selection-change="doSelection"
      />
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { tableConfig } from './attrtableData';
  //import { addAgreementApi, editAgreementApi } from '/@/api/sys/agreement';
  export default defineComponent({
    components: { BasicModal, BasicTable },
    props: {
      formData: { type: Object },
    },
    emits: ['register', 'success'],
    setup(_, { emit }) {
      const [registerTable] = useTable(tableConfig);
      const AttriList = ref();
      const [registerModel, { setModalProps, closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });
      function doSelection(rowdata: Recordable) {
        let arr: any[] = [];
        rowdata.keys.map((item) => {
          arr.push(parseInt(item));
        });
        AttriList.value = arr;
      }

      function onDataReceive(data) {
        setModalProps({ confirmLoading: false });
      }

      async function handleSubmit() {
        try {
          closeModal();
          emit('success', AttriList);
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }
      return { registerModel, handleSubmit, registerTable, doSelection };
    },
  });
</script>
